<template>
    <div class="page-container">
        <a-tabs efault-active-key="water" @change="onTabClick">
            <a-tab-pane tab="包装饮用水" key="water"> </a-tab-pane>
            <a-tab-pane tab="日用百货" key="daily"> </a-tab-pane>
            <div slot="tabBarExtraContent">
                <a-input-search placeholder="请输入关键词,例如:分类名称" v-model="params.name" @search="onSearch" style="width:300px;">
                    <a-button icon="search" type="primary" slot="enterButton">筛选</a-button>
                </a-input-search>
            </div>
        </a-tabs>
        <div class="grid-container">
            <a-table bordered :columns="columns" :dataSource="dataList" :rowSelection="{selectedRowKeys: selection, onChange: onChange,type:'radio'}" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle" style="border-left: 1px solid #e8e8e8">
                <template slot="index" slot-scope="text,record,index">
                    {{index+1}}
                </template>
                <template slot="operation" slot-scope="text,record">
                    <a-button type="default" @click="onSelect(record)">选择</a-button>
                </template>
            </a-table>
        </div>
    </div>
</template>

<script>
    import {findWaterList, findList} from "../../../api/goodsType";

    const columns=[
        // {title: '序号', dataIndex: 'index',width: 60,align:'center',scopedSlots: { customRender: 'index' }},
        {title:'分类名称',dataIndex:'name',align:'left'},
        {title: '选择',dataIndex: 'operation',align:'center',width: 100,scopedSlots: { customRender: 'operation' }}
    ]
    export default {
        props:{
            selectedKey:{
                type:Number,
                default: 0
            }
        },
        data(){
            return{
                columns,
                params:{
                  name:'',
                  type:'water'
                },
                dataList:[],
                selection:[],
                loading:false
            }
        },
        methods:{
            onTabClick(key){
                this.params.type = key
                this.onLoad()
            },
            onSearch(){
                this.onLoad();
            },
            onChange(selectedRowKeys, selectedRows){
                this.$emit('result',selectedRows[0])
            },
            onSelect(record){
               this.$emit('result', record);
            },

            async onLoad(){
                this.loading = true;
                let dataList = []
                if(this.params.type === 'daily'){
                    let resp = await findList(this.params);
                    if (this.qUtil.validResp(resp)) {
                        dataList = resp.data.dataList || []
                    }
                }else {
                    let resp = await findWaterList(this.params);
                    if (this.qUtil.validResp(resp)) {
                        dataList = resp.data.dataList || []
                    }
                }
                this.loading = false;
                this.dataList = dataList;
            },
        },
        mounted(){
            if(this.selectedKey != null && this.selectedKey > 0){
                this.selection = [this.selectedKey]
            }
            this.onLoad();
        }
    }
</script>

<style scoped>

</style>